<template>
  <div id="road-box">
    <div class="module-title">
      <i class="title-tip"></i> <span>道路拥堵情况</span>
    </div>
    <p><span>当前选择范围: </span><span class="highlight" @click="DealCurRoad(0)"> {{cur_district.name}}</span></p>
    <div class="msg-box">
      <template v-for="item in roadInfoList">
        <RoadMsg :title="setRoadTitle(item.kind)" :roadIndex="item.index" :roadSpeed="item.speed" :roadKind="item.kind" v-if="parseInt(item.kind) === 2"/>
      </template>
      <template v-for="item in roadInfoList">
        <RoadMsg :title="setRoadTitle(item.kind)" :roadIndex="item.index" :roadSpeed="item.speed" :roadKind="item.kind" v-if="parseInt(item.kind) === 3"/>
      </template>
      <template v-for="item in roadInfoList">
        <RoadMsg :title="setRoadTitle(item.kind)" :roadIndex="item.index" :roadSpeed="item.speed" :roadKind="item.kind" v-if="parseInt(item.kind) === 4"/>
      </template>
      <template v-if="roadInfoList.length === 0">
        <RoadMsg :title="setRoadTitle(2)" :roadIndex="1000" :roadSpeed="1000" :roadKind="2"/>
        <RoadMsg :title="setRoadTitle(3)" :roadIndex="1000" :roadSpeed="1000" :roadKind="3"/>
        <RoadMsg :title="setRoadTitle(4)" :roadIndex="1000" :roadSpeed="1000" :roadKind="4"/>
      </template>
    </div>
    <div class="tab-title">
      <template v-for="item in tHead">
        <span :class="item.type">{{item.name}}</span>
      </template>
    </div>
    <NoData v-if="roadList.length === 0"/>
    <EasyScrollbar :barOption="listBar">
      <div :style="{height:listH + 'px'}">
        <table>
          <tbody>
          <tr v-for="road in roadList" v-if="cur_road_kind === 0?road.kind>=0:road.kind === cur_road_kind" @click="pointToSeg(road)" :class="{active:road.segid === cur_segId}">
            <td class="rank">{{road.rank}}</td>
            <td :title="road.segname">{{road.segname}}</td>
            <td class="kind" :title="setRoadTitle(road.kind)">{{setRoadTitle(road.kind)}}</td>
            <td :title="road.startseg">{{road.startseg}}</td>
            <td :title="road.endseg">{{road.endseg}}</td>
            <td class="len">{{road.length?road.length:'-'}}</td>
            <td class="speed">{{road.speed.toFixed(1)}}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </EasyScrollbar>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import eventBus from '../../util/event-bus';
  import RoadMsg from './ctrl/roadMsg.vue'
  import ColorHelper from '../../util/colpor-helper';
  import NoData from './NoData'
  export default {
    name: 'RoadBox',
    data () {
      return {
        listH: '200px',
        tHead: [{
          name: '排名',
          type: 'rank',
        },{
          name: '道路名',
          type: 'road-name',
        },{
          name: '道路等级',
          type: 'road-level',
        },{
          name: '起点',
          type: 'start',
        },{
          name: '终点',
          type: 'end',
        },{
          name: '路长m',
          type: 'leng',
        },{
          name: '均速km/h',
          type: 'sped',
        }
        ],   //时空拥堵无标准差  '排名', '道路名','道路等级', '起点', '终点', '路长km', '均速km/h'
        roadType: 'real',
        listBar: {
          barColor: "#537185",   //滚动条颜色
          barWidth: 5,           //滚动条宽度
          railColor: "#405569",     //导轨颜色
          barMarginRight: 0,     //垂直滚动条距离整个容器右侧距离单位（px）
          barMaginBottom: 0,     //水平滚动条距离底部距离单位（px)
          barOpacityMin: 0.2,      //滚动条非激活状态下的透明度
          zIndex: "auto",        //滚动条z-Index
          autohidemode: true,     //自动隐藏模式
          horizrailenabled: false,//是否显示水平滚动条
        },
        roadKind:0,  //0-全部，2/3/4--高快/主次/支路
      }
    },
    mounted(){
      this.$nextTick(() => {
        this.listH = this.cur_state == 'real' ? (document.body.clientHeight - 552) / 2 + 16 : (document.body.clientHeight - 679) / 2 + 16;
      });
      eventBus.$on("screenHChanged",(screenHeight) => {
        this.listH = this.cur_state == 'real' ? (screenHeight - 552) / 2 + 16 : (screenHeight - 679) / 2 + 16;
      });
    },
    props: {
      roadInfoList: {
        type: Array
      },
      roadList: {
        type: Array
      },
    },
    computed: {
      ...mapGetters(['cur_district', 'cur_index_type', 'cur_state','cur_road_kind','cur_segId']),
//      listH:() => {
//        return this.cur_state === 'real'?(document.body.clientHeight - 552)/2:(document.body.clientHeight - 679)/2;
//      }
    },
    components: {
      RoadMsg,
      NoData
    },
    methods: {
      ...mapMutations(['updateCurRoadKind','updateCurSegId','updateMapLevel']),
      formatIndex: (item) => {
        return parseFloat(item) > 0 ? '+' + item : item
      },
      indexClass(item){
        return ColorHelper.setIndexColor(item, this.cur_index_type);
      },
      setRoadTitle(kind){
        switch (parseInt(kind)) {
          case 2:
            return '高快速路';
            break;
          case 3:
            return '主次干道';
            break;
          case 4:
            return '支路及其它';
            break;
          default:
            return '支路及其它';
            break;
        }
      },
      DealCurRoad(type){
        this.updateCurRoadKind(type);
      },
      pointToSeg(road){
        if(road.segid) this.updateMapLevel('07');
        this.updateCurSegId(road.segid);
      }
    },
    watch: {
      cur_state(curVal, oldVal){
        if (curVal !== oldVal) {
          this.listH = curVal == 'real' ? (document.body.clientHeight - 552) / 2 : (document.body.clientHeight - 679) / 2;
        }
      },
      cur_index_type(curVal, oldVal){
        if (curVal !== oldVal) {

        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../common/common.scss";

  #road-box {
    .tab-title {
      width: calc(100% - 14px);
      margin-left: 7px;
      opacity: 0.5;
      font-weight: normal;
      line-height: 26px;
      display: flex;
      span {
        /*flex-grow: 1;*/
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        &.rank {
          width: 36px;
        }
        &.road-name {
          width: 60px;//60 70
        }
        &.road-level {
          width: 56px;//56 66
        }
        &.start {
          width: 80px;
        }
        &.end {
          width: 50px;//50 70
        }
        &.leng {
          width: 52px;
        }
      }
    }
    .module-title {
      height: 28px;
      line-height: 28px;
      @include backdropBlur;
      background-color: rgba(0, 0, 0, 0.21);
      margin-top: 8px;
      .title-tip {
        float: left;
        width: 20px;
        height: 100%;
        background: url("../../../static/images/road/road@2x.png") no-repeat center;
        margin: 0 2px 0 6px;
      }
      span {
        opacity: 0.6;
      }
    }
    p {
      text-indent: 7px;
      line-height: 24px;
      span {
        opacity: 0.6;
        letter-spacing: 1px;
        &.highlight {
          font-weight: bold;
          color: $font-highlight;
          opacity: 1;
          cursor: pointer;
        }
      }
    }
    .msg-box {
      margin: 0 7px;
      display: flex;
    }
    table {
      width: calc(100% - 14px);
      margin-left: 7px;
      border: none;
      border-collapse: collapse;
      thead {
        tr {
          display: flex;
          th {
            flex-grow: 1;
            opacity: 0.5;
            font-weight: normal;
            line-height: 26px;
          }
        }
      }
      tbody {
        tr {
          display: flex;
          cursor: pointer;
          &:hover {
            background-color: #2e4253;
          }
          &.active{
            background-color: #2e4253;
          }
          td {
            flex-grow: 1;
            width: 70px;
            border: none;
            text-align: center;
            opacity: 0.8;
            line-height: 26px;
            border-collapse: collapse;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            box-sizing: border-box;
            padding: 0 1px;
            &.rank {
              width: 30px;
              text-align: center;
            }
            &.kind {
              width: 50px;
            }
            &.len {
              width: 32px;
            }
            &.speed {
              width: 58px;
              text-align: center;
            }
            &.redIndex {
              background-color: $bg-red;
            }
            &.lineIndex {
              background-color: $bg-line;
            }
            &.yellowIndex {
              background-color: $bg-yellow;
            }
            &.greenIndex {
              background-color: $bg-green;
            }
            &.baseIndex {
              background-color: $bg-base;
            }
          }
        }
      }
    }
  }
</style>
